import axios from 'axios';
import React, { useState, useEffect } from 'react'
import Draggable from 'react-draggable';

const Sucai = () => {
  const [list, setList] = useState([]);
  const [newList, setnewList] = useState([]);
  useEffect(() => {
    const url = "http://192.168.72.166:8080/api/getDrawDatas";
    axios.get(url).then(res => {
      const data = res.data.data;
      data.forEach((item) => {
        let img = "http://192.168.72.166:8080/" + item.draw_image;
        item.draw_image = img;
      });
      setList(data)
    })
  }, [])
  useEffect(() => {
    let arr = [];
    list.map((item) => {
      if (!arr.some(it => it == item.draw_classification)) {
        arr.push(item.draw_classification)
      }
    })
    setnewList(arr)
  }, [list])
  return (
    <div className='draw'>
      {
        newList.map(item => {
          return (
            <div className='d-1'>
              <p>{item}</p>
              <div className='d-1-1'>
                {
                  list.map(it => {
                    if (it.draw_classification == item) {
                      return <div className='d-1-1-1'><Draggable><img src={it.draw_image} className="d-1-img" /></Draggable></div>
                    }
                  })
                }
              </div>
            </div>
          )
        })
      }
    </div>
  )
}

export default Sucai